import Layer from '../../core/Layer';
import Text from '../../base/Text';
import Polygon from '../../base/Polygon';
import Rectangle from '../../base/Rectangle';
import Line from '../../base/Line';
import Point from '../../core/Point';

export default class extends Layer {
    constructor(canvas, style, text) {
        super(canvas, style);
        this.text = text;
        this.baseY = 0;
    }

    build(painter) {
        this.childs.splice(0);
        const txt = new Text(this.canvas, {
            fontSize: this.fontSize,
            fontFamily: this.fontFamily,
            color: this.fontColor,
            text: this.text,
            type: Text.TYPE.FILL,
            textAlign: 'right',
            position: 'absolute',
            bottom: this.baseY - this.fontSize / 2 + 5,
            left: this.width - 10,
        });
        const rect = new Rectangle(this.canvas, {
            width: txt.width + 20,
            height: txt.height + 10,
            left: this.width - 20 - txt.width,
            bottom: this.baseY - (txt.height + 10) / 2,
            color: this.color,
            type: Rectangle.TYPE.FILL,
            position: 'absolute',
        });
        const triangle = new Polygon(this.canvas, {
            type: Polygon.TYPE.FILL,
            position: 'absolute',
            color: this.color,
            left: this.width - rect.width - rect.height / 2,
            bottom: this.baseY - (txt.height + 10) / 2,
        }, [
            new Point(0, rect.height / 2),
            new Point(rect.height / 2, 0),
            new Point(rect.height / 2, rect.height),
        ]);
        const line = new Line(this.canvas, {
            color: this.color,
            from: new Point(0, 0),
            to: new Point(this.width - rect.width - rect.height / 2, 0),
            left: 0,
            bottom: this.baseY,
            position: 'absolute',
            lineWidth: 1,
        });
        this.addChild(line, triangle, rect, txt);
    }
}
